<template>
    <div class="student-index" style="background:#fff; overflow:hidden;">
        <el-row class="student-index-title">
            <el-col :span="24">实训案例制作</el-col>
            <el-col :span="24">Training program production</el-col>
        </el-row>
        <div class="student-index-list">
            <el-row :gutter="30">
                <el-col :span="6" v-for="(item, key, index) in listData" :key="key">
                    <div @click="storageProjectId(item.id,item.presetChapterId, item.name)">
                        <div class="list-header" :style="{ background: item.colour }">
                            <div class="list-img">
                                <img :src="item.picUrl" />
                            </div>
                            <div class="list-text1">{{ item.name }}</div>
                        </div>
                        <div class="list-content">
                            <p>{{ item.description }}</p>
                        </div>
                        <div class="list-content-knot" v-if="item.showEndItemFlag">
                            <img src="./../../assets/images/knot_icon.png" />
                        </div>
                        <div class="list-tag" :style="{ background: item.colour }" :title="item.typeName">{{ item.typeName }}</div>
                    </div>
                    <div class="btn-box">
                        <img src="./../../assets/images/fenpei_icon.png"  title="发布" v-if="item.showSubmitButtonFlag"   @click="distributionFn(item.id,item.showSubmitButtonFlag)" />
                        <img src="./../../assets/images/fenpei_icon2.png" title="取消发布" v-if="!item.showSubmitButtonFlag"   @click="distributionFn(item.id,item.showSubmitButtonFlag)" />
                        <img src="./../../assets/images/edit_icon.png" title="编辑" v-if="item.showEditButtonFlag" @click="modifyFn(item)" />
                        <img src="./../../assets/images/delete_icon.png" title="删除" v-if="item.showDelButtonFlag" @click="deleteFn(item.id)" />
                        <!-- <img src="./../../assets/images/update_icon.png" @click="updateFn(item.id)"/> -->
                        <!-- <a :href="'/dataplatform/chapter/excelDownload?itemId='+item.id"><img src="./../../assets/images/down_icon.png" /></a> -->
                    </div>
                </el-col>
                <el-col :span="6" class="add-col">
                    <div class="add-icon" @click="addFn">+</div>
                </el-col>
            </el-row>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" @close="closeDialog">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <!-- <el-form-item label="案例图片 :" prop="imageUrl">
                    <el-upload
                        class="avatar-uploader"
                        action="123"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                        style="width:226px; height:226px;">
                        <img v-if="form.imageUrl" v-model="form.imageUrl" :src="form.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item> -->
                <el-form-item label="案例背景色 :">
                    <el-radio-group v-model="form.radio">
                        <el-radio :label="1"><span style="background:#5d7faa; margin-top: 2px; vertical-align: text-top; width:30px; height:15px; display:inline-block;"></span></el-radio>
                        <el-radio style="margin-left: 7px;" :label="2"><span style="background:#009e79; margin-top: 2px; vertical-align: text-top; width:30px; height:15px; display:inline-block;"></span></el-radio>
                        <el-radio style="margin-left: 7px;" :label="3"><span style="background:#4a7fcc; margin-top: 2px; vertical-align: text-top; width:30px; height:15px; display:inline-block;"></span></el-radio>
                        <el-radio style="margin-left: 7px;" :label="4"><span style="background:#cb4761; margin-top: 2px; vertical-align: text-top; width:30px; height:15px; display:inline-block;"></span></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="案例名称 :" prop="title">
                    <el-input type="text" maxlength="15" v-model="form.title" placeholder="请输入案例名称"style="width: 50%;" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="选择专业 :" prop="professionValue">
                    <el-select
                        v-model="form.professionValue"
                        placeholder="请选择专业"
                        value-key="value"
                        style="width: 50%;">
                        <el-option
                            v-for="item in form.professionStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="案例类型 :" prop="typeValue">
                    <el-select
                        v-model="form.typeValue"
                        placeholder="请选择案例类型"
                        value-key="value"
                        style="width: 50%;">
                        <el-option
                            v-for="item in form.typeStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="案例简介 :" prop="introduction" style="position: relative;">
                    <el-input maxlength="200" style="float:left; width:75%;" type="textarea" placeholder="请输入案例简介" v-model="form.introduction" @input="introductionTargetInput" auto-complete="off"></el-input>
                    <span style="float:left; position: absolute; left: 76%; bottom: -13px;">{{form.introductionNumber}}/200</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog class="common-tool-dialog" title="流程上传" :visible.sync="dialogFormVisible3" width="500px">
            <el-form :model="form2" :rules="rules2" ref="form2" label-width="100px">
                <el-form-item label="文件上传 :" prop="versionFile" class="version-file">
                    <el-button type="primary">上传文件<input type="file" multiple="multiple" auto-complete="off" @change="getFile"></input></el-button>
                    <p v-if="form2.versionFile.length>0">已选: {{form2.versionFile}}</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="saveForm('form2')" :disabled="saveDisabled">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data () {
            return {
                projectId: '',
                dialogTitle: '',
                dialogFormVisible: false,
                listData:[],
                form: {
                    id: '',
                    // imageUrl: '',
                    // fileName: '',
                    // imageFlag: false,
                    // imagePercentage: 0,
                    title: '',
                    // type: '',
                    typeStatus: [],
                    typeValue: '',
                    introduction: '',
                    // 新增
                    professionValue: '',
                    professionStatus: [],
                    radio: 1,
                    introductionNumber:200
                },
                rules: {
                    // imageUrl: [
                    //     { required: true, message: '请上传案例图片', trigger: 'blur' }
                    // ],
                    title: [
                        { required: true, message: '请输入案例名称', trigger: 'blur' }
					],
                    typeValue: [
                        { required: true, message: '请选择案例类型', trigger: 'blur' }
                    ],
                    professionValue: [
                        { required: true, message: '请选择专业', trigger: 'blur' }
					],
					introduction: [
                        { required: true, message: '请输入案例简介', trigger: 'blur' }
                    ]
                },
                addOrModify: '',
                dialogFormVisible3: false,
                form2: {
                    fileName: '',
                    versionFile: ''
                },
                rules2: {
                    versionFile: [
                        { required: true, message: '请上传文件', trigger: 'blur' }
					]
                },
                saveDisabled: false

            }
        },
        created () {

            this.initSearch()
            this.init()
        },
        computed:{
            ...mapState(['chapterType','itemServiceType', 'projectBreadCrumbBack'])
		},
        methods: {
            initSearch(){
                let self = this
                 self.$http.get('/dataplatform/common/systemConfig/list?searchConfigs=industryType').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for (let i = 0; i < res.data.length; i++) {
                            let industryJson = {}
                            industryJson.value = res.data[i].id
                            industryJson.label = res.data[i].keyValue
                            self.form.typeStatus.push(industryJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            init() {
                let self = this
                self.$http.get('/dataplatform/item/list?itemServiceType=2').then((response) => {
                    let res = response.data
                    if(res.code == '200'){
                        self.listData = res.data
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //添加弹窗
            addFn(){
                let self = this
                self.form.professionStatus = []
                self.$http.get('/dataplatform/major/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for (let i = 0; i < res.data.length; i++) {
                            let industryJson = {}
                            industryJson.value = res.data[i].id
                            industryJson.label = res.data[i].name
                            self.form.professionStatus.push(industryJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
                this.addOrModify = 1
                this.dialogTitle = '添加案例'
                this.form.id = ''
                this.form.radio = 1
                this.form.title = ''
                this.form.typeValue = ''
                this.form.introduction = ''
                this.dialogFormVisible = true
            },
            //关闭弹窗
            closeDialog(){
                this.$refs.form.resetFields()
            },
            //存储案例ID
            storageProjectId(id, chapterId, name){
                let result = {
                    itemId: id,

                }
                localStorage.setItem('teacher-project-id', JSON.stringify(result))
                this.$store.commit('updateItemServiceType', 2)
                this.$store.commit('updateChapterType', chapterId)
                this.$store.commit('updateProjectBreadCrumbBack', name);
                this.$router.push({
                    path: '/teacher/productionProjectProfile'
                });
            },
            //编辑弹窗
            modifyFn (item) {
                let self = this
                self.form.professionStatus = []
                self.$http.get('/dataplatform/major/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for (let i = 0; i < res.data.length; i++) {
                            let industryJson = {}
                            industryJson.value = res.data[i].id
                            industryJson.label = res.data[i].name
                            self.form.professionStatus.push(industryJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
                this.addOrModify = 2
                this.dialogFormVisible = true
                this.dialogTitle = '修改案例'
                let radios;
                if(item.colour == '#5d7faa'){
                    radios = 1
                }else if(item.colour == '#009e79'){
                    radios = 2
                }else if(item.colour == '#4a7fcc'){
                    radios = 3
                }else if(item.colour == '#cb4761'){
                    radios = 4
                }
                this.form.id = item.id
                this.form.title = item.name
                this.form.professionValue = item.majorId
                this.form.typeValue = item.systemConfigId
                this.form.introduction = item.description
                this.form.introductionNumber = 200 - item.description.length
                this.form.radio = radios
            },
            //案例简介字数限制
            introductionTargetInput(){
                var txtVal = this.form.introduction.length;
                this.form.introductionNumber = 200 - txtVal
            },
            //编辑表单提交
            submitForm(formName) {
                let self = this
				self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let colorText,
                            data = {},
                            pathUrl,
                            radio = self.form.radio

                        if(radio == 1){
                            colorText = '#5d7faa'
                        }else if(radio == 2){
                            colorText = '#009e79'
                        }else if(radio == 3){
                            colorText = '#4a7fcc'
                        }else if(radio == 4){
                            colorText = '#cb4761'
                        }
                        //判断是添加或修改1添加2修改
                        if(self.addOrModify == 1){
                            pathUrl = '/dataplatform/item/create'
                            data = {
                                // picName: self.form.fileName,
                                name: self.form.title,
                                systemConfigId: self.form.typeValue,
                                majorId: self.form.professionValue,
                                description: self.form.introduction,
                                colour: colorText
                            }
                        }else{
                            pathUrl = '/dataplatform/item/update'
                            data = {
                                id: self.form.id,
                                name: self.form.title,
                                majorId: self.form.professionValue,
                                systemConfigId: self.form.typeValue,
                                description: self.form.introduction,
                                colour: colorText
                            }
                        }
                        self.$http.post(pathUrl,data).then(response => {
                            let res = response.data
                            if(res.code == '200') {
                                if(self.addOrModify == 1){
                                    self.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    })
                                    self.$refs[formName].resetFields()
                                }else{
                                    self.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    })
                                }
                                self.init()
                                self.dialogFormVisible = false
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //图片上传进度
            // handleProgress(event, file, fileList) {
            //     console.log(file)
            //     this.form.imageFlag = true;
            //     this.form.imagePercentage = file.percentage;
            // },
            //上传文件之前的钩子
            beforeAvatarUpload(file) {
                let fd = new FormData()
                    fd.append('files', file)
                this.$http.post('/dataplatform/common/upload/file',fd).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        this.form.imageUrl = res.data[0].mappingFilePath
                        this.form.fileName = res.data[0].fileName
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //删除
            deleteFn(id) {
                let self = this;
                self.$confirm('是否删除?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    self.$http.get('/dataplatform/item/delete?ids='+id).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {});
            },
            //提交分配案例
            distributionFn(id,showSubmitButtonFlag) {
                let self = this
                let content
                if(showSubmitButtonFlag){
                    content =  '提交后管理员可分配案例,是否发布?'
                }else{
                    content =  '取消发布后管理员无法分配案例，是否取消发布?'
                }
                self.$confirm(content, '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    //确认
                    self.$http.get('/dataplatform/item/submit?ids='+id).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            if(showSubmitButtonFlag){
                                self.$message({
                                    message: '发布成功',
                                    type: 'success'
                                })
                            }else{
                                self.$message({
                                    message: '取消发布成功',
                                    type: 'success'
                                })
                            }
                            self.init()
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {})
            },
            //上传文件初始化
            updateFn(id){
                this.projectId = id
                this.form2.fileName = ''
                this.form2.versionFile = ''
                this.dialogFormVisible3 = true
            },
            //上传文件
            getFile($event) {
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(fileType != 'xls' && fileType != ".xlsx"){
                    this.$message.error('请上传Excel文件!')
                    return
                }
                this.form2.fileName = $event.target.files[0]
                this.form2.versionFile = $event.target.files[0].name
            },
            //上传文件表单提交
            saveForm(form2) {
                let self = this
                self.saveDisabled = true
                let formData = new FormData()
                    formData.append('file', self.form2.fileName);
                    formData.append('itemId', self.projectId);
				self.$refs[form2].validate((valid) => {
                    if (valid) {
                        self.$http.post('/dataplatform/chapter/excelUpload', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$message({
                                    message: '上传成功',
                                    type: 'success'
                                })
                                self.dialogFormVisible3 = false
                                self.$refs[form2].resetFields()
                                self.listTable()
                                self.saveDisabled = false
                            }else if(res.code == '401'){
                                self.saveDisabled = false
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.saveDisabled = false
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    @import '@/assets/styles/student.scss';
    .el-upload-list__item-actions{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0,0,0,.5);
        transition: opacity .3s;
        .el-upload-list__item-delete{
            display: block;
            color: #fff;
            top: 25px;
            left: 10px;
            font-size: 18px;
        }
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover{
            .el-upload-list__item-actions{
                opacity: 1;
            }
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 226px;
            height: 226px;
            line-height: 226px;
            text-align: center;
        }
    }
    .avatar {
        width: 226px;
        height: 226px;
        display: block;
    }
</style>
